<template>
  <div id="wallpaper">
    <div class="shopMsg">
      <FlowerListItem></FlowerListItem>
      <div class="content">
        <div class="spec">
          <div class="title">规格：</div>
          <div class="group">
            <div v-for="(item_number , index) in items.number" :key="index" :class="item_number.active === undefined ? '' : 'active'">{{item_number.count}} 枝</div>
          </div>
        </div>
        <div class="color">
          <div class="title">颜色：</div>
          <div class="group">
            <div v-for="item_color in items.color" :class="item_color.active === undefined ? '' : 'active'">{{item_color.c}}色</div>
          </div>
        </div>
      </div>
      <div class="number">
        <div class="title">购买数量：</div>
        <div class="group computed">
          <div class="jian">-</div>
          <div class="value">2</div>
          <div class="add">+</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FlowerListItem from '../components/FlowerListItem'
    export default {
      name: "ShopSpec",
      data(){
        return{
          active : true,
          items : {
            number : [
              {
                count : '11',
              },
              {
                count : '16',
              },
              {
                count : '22',
              },
              {
                count : '99',
              },
              {
                count : '111',
              },
              {
                count : '166',
              },
              {
                count : '999',
              }
            ],
            color : [
              {c : '红',},
              {c : '白',},
              {c : '粉',}
            ]
          }
        }
      },
      components : {
        FlowerListItem,
      },
      created(){
        let {number , color} = this.items;
            number[0].active = true;
            color[1].active = true;
      }
    }
</script>

<style scoped lang="less">
  *{
    margin: 0;
    padding: 0;
  }
  #wallpaper{
    position: relative;
    height: calc(100% - 50px);
    width: 100%;
  }
.shopMsg{
  width: 100%;
  background: rgba(0,0,0, .5);
  text-align: start;
  z-index: 999;
  position: absolute;
  bottom: 0;
  .content{
    padding: 15px 15px;
    border-bottom: 1px dashed #cccccc;
    background: #ffffff;

    >div{
      margin-bottom: 15px;
    }
  }
  .title{
    text-align: start;
    line-height: 30px;
  }
  .group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    >div{
      width: calc(25% - 4px);
      color: #999999;
      margin: 5px 0;
      margin-right: 5px;
      line-height: 30px;
      border: 1px solid #cccccc;
      text-align: center;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-sizing: border-box;
    }
    >div:nth-child(4n){
      margin-right: 0 !important;
    }
    .active{
      background: #ef2b67;
      color: #ffffff;
    }
  }
  //数量
  .number {
    background: #ffffff;
    display: flex;
    padding: 20px 15px;
    justify-content: space-between;
    width: 100%;
    z-index: 999;
    .computed {
      display: flex;
      justify-content: space-between;
      width: 170px;
      font-size: 18px;
      line-height: 40px;
      > div {
        width: 50px;
        color: #000000;
      }
      .value {
        border: none;
      }
      .add{
        margin-right: 0;
      }
    }
  }
}
</style>
